import React, { useState, useCallback, useEffect, useRef } from 'react';
import { Upload, Progress, Message, Image } from '@arco-design/web-react';
import request from '@/utils/request';
import styles from './index.module.scss';
import { ICON_PATHS } from '@/assets/images/constants';
import { showConfirmModal } from '@/components/common/mlsModal/modalUtils';

const MLSUpload = ({
  // 组件配置参数
  action = '/dk/v1/fileTransfer/uploader', // 上传接口地址
  multiple = false, // 是否支持多文件上传
  accept = '*', // 接受的文件类型
  maxSize = 100, // 最大文件大小（MB）
  showUploadList = true, // 是否显示上传列表
  disabled = false, // 是否禁用
  title = '上传音频',
  subtitle = '',
  className = '',
  // 回调函数
  onSuccess, // 上传成功回调
  onError, // 上传失败回调
  onProgress, // 上传进度回调
  onRemove, // 删除文件回调
  children, // 自定义上传触发元素
  customValidator,
  ...restProps // 其他Upload组件属性
}) => {
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);
  //   const [fileList, setFileList] = useState([]);
  const [fileName, setFileName] = useState(null);
  const abortControllerRef = useRef(null); // 用于取消请求的引用
  const isMountedRef = useRef(true); // 新增：组件挂载状态引用

  // 安全的状态更新函数
  const safeSetState = useCallback((setter, value) => {
    if (isMountedRef.current) {
      setter(value);
    }
  }, []);

  // 自定义上传请求
  const customRequest = async options => {
    console.log('customRequest', options);

    const {
      file,
      onProgress: onProgressCallback,
      onSuccess: onSuccessCallback,
      onError: onErrorCallback,
    } = options;

    // 创建新的AbortController用于取消请求
    abortControllerRef.current = new AbortController();

    safeSetState(setUploading, true);
    safeSetState(setProgress, 0);
    safeSetState(setFileName, file.name);

    try {
      // 创建FormData
      const formData = new FormData();
      formData.append('file', file);
      formData.append('fileName', file.name);

      // 发起上传请求
      const response = await request.post(action, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        signal: abortControllerRef.current.signal, // 添加取消信号
        onUploadProgress: progressEvent => {
          // 计算上传进度
          const percent = progressEvent.total
            ? Math.round((progressEvent.loaded * 100) / progressEvent.total)
            : 0;
          safeSetState(setProgress, percent);
          if (isMountedRef.current) {
            // 调用进度回调
            if (onProgressCallback) {
              onProgressCallback(percent, progressEvent);
            }
            if (onProgress) {
              onProgress(percent, progressEvent, file);
            }
          }
        },
      });

      // 生成唯一uid（如果文件没有uid）
      const fileUid =
        file.uid || `audio_file_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

      const result = {
        uid: fileUid,
        name: file.name,
        status: 'done',
        url: response.data,
        response: response,
      };

      if (isMountedRef.current) {
        // 调用成功回调
        if (onSuccessCallback) {
          onSuccessCallback(result, file);
        }
        if (onSuccess) {
          onSuccess(result, file);
        }
        // 上传成功处理
        safeSetState(setProgress, 100);
        safeSetState(setUploading, false);
        safeSetState(setProgress, 0);
        safeSetState(setFileName, null);
      }
    } catch (error) {
      // 上传失败处理
      // 如果是取消请求导致的错误，不更新状态

      if (error.name === 'AbortError' || error.message === 'canceled') {
        console.log('上传请求已被取消');
        return;
      }
      // 其他错误处理
      if (abortControllerRef.current) {
        safeSetState(setUploading, false);
        safeSetState(setFileName, null);

        const errorResult = {
          uid: file.uid,
          name: file.name,
          status: 'error',
          error,
        };

        if (onErrorCallback) onErrorCallback(error, file);
        if (onError) onError(error, file);
        Message.error(`文件上传失败: ${error.message || '未知错误'}`);
      }
    } finally {
      // 清理引用
      abortControllerRef.current = null;
    }
  };

  // 默认的文件类型校验规则
  const defaultValidators = {
    // 图片文件校验
    image: file => {
      // 检查文件类型是否为图片
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        Message.error('请上传图片文件');
        return false;
      }

      // 检查文件大小（例如：5MB）
      // const maxSize = maxSize * 1024 * 1024;
      if (file.size > maxSize * 1024 * 1024) {
        Message.error(`图片大小不能超过${maxSize}MB`);
        return false;
      }

      return true;
    },

    // 音频文件校验
    audio: file => {
      // 检查文件类型是否为音频
      const isAudio = file.type.startsWith('audio/');
      if (!isAudio) {
        console.error('请上传音频文件');
        showConfirmModal({
          title: '提示',
          content: '请上传音频文件',
          okButtonProps: {
            style: { display: 'none' },
          },
          modalProps: {
            height: 200,
          },
        });
        return false;
      }

      // 检查文件大小（例如：10MB）
      // const maxSize = maxSize * 1024 * 1024;
      if (file.size > maxSize * 1024 * 1024) {
        Message.error(`音频大小不能超过${maxSize}MB`);
        return false;
      }

      return true;
    },

    // 其他文件类型的校验规则可以继续添加
  };

  // 根据accept类型获取对应的校验器
  const getValidatorByAccept = acceptStr => {
    if (acceptStr.includes('image/')) {
      return defaultValidators.image;
    } else if (acceptStr.includes('audio/')) {
      return defaultValidators.audio;
    }
    // 默认校验（只检查文件是否存在）
    return () => true;
  };

  // 文件上传前校验
  const beforeUpload = file => {
    // 如果提供了自定义校验器，则优先使用
    if (typeof customValidator === 'function') {
      return customValidator(file);
    }

    // 否则根据accept属性选择默认校验器
    const validator = getValidatorByAccept(accept);
    return validator(file);
  };

  const handleRemove = useCallback(() => {
    console.log('停止上传');
    safeSetState(setUploading, false);
    safeSetState(setFileName, null);

    // 取消当前上传请求
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      abortControllerRef.current = null;
    }
    if (onRemove) onRemove();
  }, [onRemove, safeSetState]);

  // 清理函数：组件卸载时取消所有进行中的请求
  useEffect(() => {
    return () => {
      isMountedRef.current = false; // 组件卸载时标记
      if (abortControllerRef.current) {
        abortControllerRef.current.abort(); // 取消进行中的请求
      }
    };
  }, []);

  return (
    <div className={`${styles.uploadContainer} ${className}`}>
      {/* Arco Design Upload组件 */}
      {
        <Upload
          customRequest={customRequest}
          beforeUpload={beforeUpload}
          // fileList={fileList}
          multiple={multiple}
          accept={accept}
          className={styles.arcoUploadBox}
          showUploadList={showUploadList}
          disabled={disabled || uploading}
          {...restProps}>
          {children || (
            <div className={styles.uploadPlaceholder}>
              <div className={styles.uploadIcon}>
                <Image src={ICON_PATHS.AUDIO_UPLOAD_ICON} draggable={false} preview={false}></Image>
              </div>

              <div className={styles.uploadText}>
                <span>{title}</span>
                {subtitle && <span>({subtitle})</span>}
              </div>
            </div>
          )}
        </Upload>
      }
      {uploading && (
        <div className={styles.progressContainer}>
          <div className={styles.progressText}>
            <span>{fileName}</span>
            <span>{`${Math.round(progress)}%`}</span>
          </div>
          <Progress
            percent={progress}
            status={'success'}
            showText={false}
            trailColor="#27262f"
            className={styles.progressBar}
          />
          <div className={styles.deleteIcon} onClick={handleRemove}>
            <Image src={ICON_PATHS.X_DELETE_ICON} draggable={false} preview={false}></Image>
          </div>
        </div>
      )}
    </div>
  );
};

export default MLSUpload;
